// 详情页
export const detailPage = `
<template>
  <div class="page-container">
    <div class="product-detail">
      <!-- 详情页头部信息 -->
      <div class="product-header">
        <div class="product-images">
          <div class="main-image">
            <img :src="currentMainImage" :alt="detail.title" @error="handleImageError" />
          </div>
          <div v-if="detail.thumbnailImages?.length > 1" class="thumbnail-images">
            <img
              v-for="(thumb, index) in detail.thumbnailImages"
              :key="index"
              :src="thumb.url"
              :alt="'缩略图' + (index + 1)"
              @click="switchMainImage(thumb.url)"
              :class="{ active: currentMainImage === thumb.url }"
            />
          </div>
        </div>

        <div class="product-info">
          <h1 class="product-title">{{ detail.title }}</h1>
          <h2 class="product-subtitle">{{ detail.subtitle }}</h2>
          <p class="product-description">{{ detail.description }}</p>

          <div class="product-meta">
            <div class="meta-item">
              <span class="meta-label">分类：</span>
              <span class="meta-value">{{ detail.categoryName }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">型号：</span>
              <span class="meta-value">{{ detail.modelType }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">浏览次数：</span>
              <span class="meta-value">{{ detail.viewCount }}</span>
            </div>
          </div>

          <div class="product-tags">
            <span class="tag" v-for="tag in detail.tags" :key="tag.name">
              {{ tag.name }}
            </span>
          </div>
        </div>
      </div>

      <!-- 详情页参数 -->
      <div class="product-parameters">
        <h3>详情页参数</h3>
        <div class="parameters-list">
          <div v-for="param in detail.parameters" :key="param.name" class="parameter-item">
            <div class="param-name">{{ param.name }}</div>
            <div class="param-value" v-html="param.value"></div>
          </div>
        </div>
      </div>

      <!-- 详情页详细内容 -->
      <div class="product-content">
        <h3>详情页详情</h3>
        <div class="content-body" v-html="detail.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { testApi } from "@/api/system";
import { mockProjectDetail } from "@/assets/mock";
// 响应式数据
const detail = ref<any>({});
const loading = ref(true);
const currentMainImage = ref("");
const route = useRoute();
const projId = route.params.id;
const modelType = "$modelType"; // 模型类型，创建菜单时，后台会自动替换成对应的模型，例如产品、新闻
const pageType = "$pageType"; // 页面类型，判断是数据是预览还是正式
/**
 * 初始化页面数据
 * 调用接口获取产品详情信息
 */
const initPage = async () => {
  try {
    if (!pageType.includes('$')) {
      loading.value = true;
      const res = await testApi(projId);
      detail.value = res;
      // 设置默认主图
      if (res?.mainImages?.length) {
        currentMainImage.value = res.mainImages[0];
      }
    } else {
      detail.value = mockProjectDetail;
      currentMainImage.value = detail.value.mainImages[0]
    }
  } catch (error) {
    console.error("获取产品详情失败:", error);
  } finally {
    loading.value = false;
  }
};

/**
 * 切换主图显示
 * @param imageUrl 图片URL（来源：缩略图点击）
 */
const switchMainImage = (imageUrl: string) => {
  console.log(imageUrl, "点击的图片数据");
  currentMainImage.value = imageUrl;
};

/**
 * 处理图片加载错误
 * @param event 错误事件（来源：图片加载失败）
 */
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  target.src = "/favicon.ico"; // 使用默认图片
};

// 初始化页面
initPage();

// 生命周期
onMounted(() => {
  console.log("产品详情页面已挂载");
});
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
}

/* 加载状态 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 产品详情 */
.product-detail {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 产品头部 */
.product-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px;
}

.product-images {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main-image {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.main-image img:hover {
  transform: scale(1.05);
}

.thumbnail-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.thumbnail-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.thumbnail-images img:hover {
  border-color: #409eff;
}

.thumbnail-images img.active {
  border-color: #409eff;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.product-subtitle {
  font-size: 18px;
  color: #666;
  margin: 0;
  font-weight: normal;
}

.product-description {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  font-weight: 600;
  color: #333;
  min-width: 80px;
}

.meta-value {
  color: #666;
}

.product-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: #f0f9ff;
  color: #0369a1;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  border: 1px solid #e0f2fe;
}

/* 产品参数 */
.product-parameters {
  padding: 40px;
  border-top: 1px solid #f0f0f0;
}

.product-parameters h3 {
  font-size: 24px;
  color: #333;
  margin: 0 0 24px 0;
  font-weight: 600;
}

.parameters-list {
  display: grid;
  gap: 16px;
}

.parameter-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.param-name {
  font-weight: 600;
  color: #333;
}

.param-value {
  color: #555;
  line-height: 1.6;
}

/* 产品内容 */
.product-content {
  padding: 40px;
  border-top: 1px solid #f0f0f0;
}

.product-content h3 {
  font-size: 24px;
  color: #333;
  margin: 0 0 24px 0;
  font-weight: 600;
}

.content-body {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.content-body p {
  margin-bottom: 16px;
}

.content-body strong {
  color: #333;
  font-weight: 600;
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-header {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .main-image {
    height: 300px;
  }

  .product-title {
    font-size: 24px;
  }

  .parameter-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .product-parameters,
  .product-content {
    padding: 20px;
  }
}
</style>
`

// 列表页

export const listPage = `
<template>
  <div class="page-container">你好</div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})
// 获取分类、获取页面数据
import { getSubMenuListByCode, getListDetailAllPage, getRecommends } from "@/api/projects";
import { mockProjectCategories } from "@/assets/mock";
const pageType = "$pageType"; // 页面类型，判断是数据是预览还是正式 list page detail
const parentCode = "$modelId"; // 模型id，创建菜单时，后台会自动替换成对应的模型id(getModelDetailById接口用到的id)
const categories = ref<any[]>([]); // 分类数据
const recommends = ref<any[]>([]); // 推荐数据
const list = ref<any[]>([]); // 列表数据
const pages = reactive({
  pageSize: 20,
  pageNum: 1,
  total: 0
});
/**
 * 初始化页面数据
 */
const initPage = async () => {
  try {
    if (!pageType.includes('$')) {
      const cat = await getSubMenuListByCode(parentCode);
      console.log(cat, "页面分类数据");
      categories.value = cat;
      const items = await getListDetailAllPage({ categoryId: parentCode, ...pages });
      console.log(items, "页面数据");
      list.value = items.rows;
      pages.total = items.total;
      const rems = await getRecommends();
      console.log(rems, "推荐");
      recommends.value = rems.rows;
    } else {
      categories.value = mockProjectCategories;
    }
  } catch (error) {
    console.error("获取产品详情失败:", error);
  } finally {
    console.log("页面初始化完毕");
  }
};

// 初始化页面
initPage();

// 生命周期
onMounted(() => {
  console.log("页面已挂载");
});
</script>

<style scoped></style>

`

// 单页
export const singlePage = `
<template>
  <div class="page-container">
    <Position :menu-code="pageCode" :picture="menuInfo.picture" :name="menuInfo.name" class="position"></Position>
    <section class="page-content">
      <!-- Tab切换功能 -->
      <div v-if="menuInfo.children && menuInfo.children.length > 0" class="tab-container">
        <div class="tab-header">
          <NuxtLink v-for="child in menuInfo.children" :key="child.code" :to="child.link" class="tab-item" :class="{ active: isActiveTab(child.link) }">
            {{ child.name }}
          </NuxtLink>
        </div>

        <!-- Tab内容区域 -->
        <div class="tab-content">
          <div v-if="filteredPageData && filteredPageData.length > 0" class="content-list">
            <div v-for="(item, index) in filteredPageData" :key="index" class="content-item">
              <div class="item-header">
                <h3 class="item-title">{{ item.title }}</h3>
                <div class="item-meta">
                  <span class="author">{{ item.author }}</span>
                  <span class="date">{{ formatDate(item.createdAt) }}</span>
                  <span class="category">{{ item.categoryName }}</span>
                </div>
              </div>

              <div v-if="item.mainImages && item.mainImages.length > 0" class="item-images">
                <NuxtImg v-for="(image, imgIndex) in item.mainImages.slice(0, 3)" :key="imgIndex" :src="image" class="content-image" :alt="item.title" />
              </div>

              <div class="item-content">
                <p class="description">{{ item.description }}</p>
                <div v-if="item.content" class="full-content" v-html="item.content"></div>
              </div>

              <div v-if="item.tags && item.tags.length > 0" class="item-tags">
                <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>

          <div v-else class="empty-content">
            <p>该分类下暂无内容</p>
          </div>
        </div>
      </div>
      <div v-else>
        <!-- 无子菜单时的默认内容 -->
        <div class="default-content">
          <div v-if="pageData && pageData.length > 0" class="content-grid">
            <div v-for="(item, index) in pageData" :key="index" class="feature-card">
              <!-- 卡片头部 -->
              <div class="card-header">
                <div class="header-content">
                  <h3 class="card-title">{{ item.title }}</h3>
                  <p v-if="item.subtitle" class="card-subtitle">{{ item.subtitle }}</p>
                </div>
                <div v-if="item.viewCount" class="view-count">
                  <Icon name="uil:eye" size="16" />
                  <span>{{ item.viewCount }}</span>
                </div>
              </div>

              <!-- 描述内容 -->
              <div v-if="item.description" class="card-description">
                <p>{{ item.description }}</p>
              </div>

              <!-- 主要内容 -->
              <div v-if="item.content" class="card-content">
                <div class="content-html" v-html="item.content"></div>
              </div>

              <!-- 参数列表 -->
              <div v-if="item.parameters && item.parameters.length > 0" class="parameters-section">
                <h4 class="parameters-title">
                  <Icon name="uil:setting" size="18" />
                  核心特性
                </h4>
                <div class="parameters-grid">
                  <div v-for="param in item.parameters" :key="param.name" class="parameter-item">
                    <div class="param-name">{{ param.name }}</div>
                    <div class="param-value">{{ param.value }}</div>
                  </div>
                </div>
              </div>

              <!-- 卡片底部信息 -->
              <div class="card-footer">
                <div class="meta-info">
                  <span v-if="item.author" class="author">
                    <Icon name="uil:user" size="14" />
                    {{ item.author }}
                  </span>
                  <span class="date">
                    <Icon name="uil:calendar-alt" size="14" />
                    {{ formatDate(item.createdAt) }}
                  </span>
                  <span v-if="item.categoryName" class="category">
                    <Icon name="uil:folder" size="14" />
                    {{ item.categoryName }}
                  </span>
                </div>

                <div v-if="item.tags && item.tags.length > 0" class="tags-section">
                  <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
                </div>
              </div>
            </div>
          </div>

          <div v-else class="empty-state">
            <div class="empty-icon">
              <Icon name="uil:file-search-alt" size="48" />
            </div>
            <h3>暂无内容</h3>
            <p>当前分类下还没有发布任何内容</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { getModelList } from "@/api/projects";
import { mockProjectPage } from "@/assets/mock";
const pageType = "$pageType"; // 页面类型，判断是数据是预览还是正式 list page detail
const basePageCode = "$pageCode"; // 基础页面code

/**
 * 动态页面代码，根据当前分类参数切换
 * @returns 当前页面代码
 */
const pageCode = computed(() => {
  // 如果currentCategory为空，返回基础pageCode
  if (!currentCagegory.value) {
    return basePageCode;
  }

  // 根据currentCategory查找对应的子菜单code
  const currentChild = getCurrentChildMenu.value;
  if (currentChild && currentChild.code) {
    return currentChild.code;
  }

  // 如果找不到对应的子菜单，返回基础pageCode
  return basePageCode;
});
const pageData = ref<any>(null);
const menuInfo = ref<any>({});
const route = useRoute();
const appConfig = useAppConfig();
const { menus } = appConfig.systemConfig;
console.log("all:", route.params.all); // array

/**
 * 获取当前分类参数
 * @returns 当前分类字符串
 */
const currentCagegory = computed(() => {
  if (route.params.all && Array.isArray(route.params.all) && route.params.all.length > 0) {
    return route.params.all[0] as string;
  }
  return "";
});

/**
 * 判断tab是否为当前激活状态
 * @param link - tab的链接地址
 * @returns 是否激活
 */
const isActiveTab = (link: string): boolean => {
  if (!currentCagegory.value) return false;
  return link.includes(currentCagegory.value);
};

/**
 * 格式化日期显示
 * @param dateString - 日期字符串
 * @returns 格式化后的日期字符串
 */
const formatDate = (dateString: string): string => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  });
};

/**
 * 获取当前激活的子菜单信息
 * @returns 当前激活的子菜单对象或默认第一个子菜单
 */
const getCurrentChildMenu = computed(() => {
  if (!menuInfo.value.children || menuInfo.value.children.length === 0) {
    return null;
  }

  // 如果有currentCategory，查找对应的子菜单
  if (currentCagegory.value) {
    const foundChild = menuInfo.value.children.find((child: any) => child.link.includes(currentCagegory.value));
    if (foundChild) {
      return foundChild;
    }
  }

  // 默认返回第一个子菜单
  return menuInfo.value.children[0];
});

/**
 * 根据当前激活的子菜单过滤页面数据
 * @returns 过滤后的页面数据数组
 */
const filteredPageData = computed(() => {
  if (!pageData.value || !Array.isArray(pageData.value)) {
    return [];
  }

  const currentChild = getCurrentChildMenu.value;
  if (!currentChild || !currentChild.code) {
    return pageData.value;
  }

  return pageData.value.filter((item: any) => item.categoryId === currentChild.code);
});

/**
 * 根据code在menus数组中递归查找菜单信息
 * @param menuList - 菜单列表数组
 * @param targetCode - 目标菜单代码
 * @returns 找到的菜单信息或null
 */
function findMenuByCode(menuList: any[], targetCode: string): any | null {
  for (const menu of menuList) {
    if (menu.code === targetCode) {
      return menu;
    }

    if (menu.children && menu.children.length > 0) {
      const result = findMenuByCode(menu.children, targetCode);
      if (result) {
        return result;
      }
    }
  }
  return null;
}

/**
 * 根据pageCode获取menus中对应的菜单信息
 * @param code - 菜单代码
 * @returns 菜单信息或null
 */
function getMenuDetailByCode(code: string): any | null {
  return findMenuByCode(menus, code);
}
definePageMeta({
  layout: "default"
});
/**
 * 初始化页面数据
 */
const initPage = async () => {
  try {
    if (!pageType.includes("$")) {
      // 获取当前菜单信息
      const menuInfoRes = getMenuDetailByCode(basePageCode);
      console.log(menuInfoRes, "menuInfoRes");
      if (menuInfoRes) {
        menuInfo.value = menuInfoRes;
        useHead({
          title: menuInfoRes.name,
          meta: [
            { name: "keywords", content: menuInfoRes.keywords },
            { name: "description", content: menuInfoRes.description }
          ]
        });
        // 获取页面绑定的数据
        if (menuInfoRes.modelId) {
          const res = await getModelList(menuInfoRes.modelId);
          pageData.value = res.rows;
          console.log(pageData.value, "页面数据");
        }
      } else {
        console.warn("未找到当前页面的菜单信息");
      }
    } else {
      pageData.value = mockProjectPage;
    }
  } catch (error) {
    console.error("获取产品详情失败:", error);
  } finally {
    console.log("页面初始化完毕");
  }
};

// 初始化页面
initPage();

/**
 * pageData 的数据结构说明, pageData 是个输入，使用： pageData[index].author
 * @typedef {Object} PageData
 * @property {string} author - 作者信息
 * @property {string} categoryId - 分类ID
 * @property {string} categoryName - 分类名称
 * @property {string} content - 页面内容
 * @property {string} createdAt - 创建时间
 * @property {string} description - 页面描述
 * @property {boolean} isPublished - 是否已发布
 * @property {boolean} isRecommend - 是否推荐
 * @property {boolean} isRelatedRecommend - 是否相关推荐
 * @property {Array<string>} mainImages - 主图片数组
 * @property {string} modelId - 关联模型ID
 * @property {string} modelName - 模型名称
 * @property {string} modelType - 模型类型
 * @property {Array} parameterList - 参数列表
 * @property {Array} parameters - 参数数组
 * @property {string} seoDesc - SEO描述
 * @property {string} seoKey - SEO关键词
 * @property {string} subtitle - 副标题
 * @property {Array<string>} tags - 标签数组
 * @property {Array<string>} thumbnailImages - 缩略图数组
 * @property {string} title - 页面标题
 * @property {string} updatedAt - 更新时间
 * @property {number} viewCount - 访问量
 */

/**
 * menuInfo 的数据结构说明
 * @typedef {Object} MenuInfo
 * @property {Array} children - 子菜单数组
 * @property {number} clickable - 是否可点击 (1: 可点击, 0: 不可点击)
 * @property {string} code - 菜单唯一标识码
 * @property {string} createdAt - 创建时间
 * @property {string} description - 菜单描述信息
 * @property {string} detailTplId - 详情模板ID
 * @property {string} detailTplName - 详情模板名称
 * @property {string} icon - 菜单图标URL
 * @property {number} isOutLink - 是否外部链接 (1: 是, 0: 否)
 * @property {string} keywords - SEO关键词
 * @property {string} link - 菜单链接地址
 * @property {string} listTplId - 列表模板ID
 * @property {string} listTplName - 列表模板名称
 * @property {string} modelId - 关联模型ID
 * @property {string} modelName - 模型名称
 * @property {string} modelType - 模型类型
 * @property {string} name - 菜单显示名称
 * @property {string} outLink - 外部链接地址
 * @property {string} parentCode - 父级菜单代码
 * @property {string} parentLink - 父级菜单链接
 * @property {string} parentName - 父级菜单名称
 * @property {string} picture - 菜单图片URL
 * @property {number} sort - 排序值
 * @property {number} status - 状态 (1: 启用, 0: 禁用)
 * @property {string} title - 菜单标题
 */
</script>

<style scoped lang="scss">
.page-content {
  max-width: 1400px;
  margin: 0 auto;
}

.tab-container {
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.tab-header {
  display: flex;
  gap: 0;
  justify-content: center;
}

.tab-item {
  padding: 12px 24px;
  text-decoration: none;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  font-weight: 500;

  &:hover {
    color: #1890ff;
    background-color: #f5f5f5;
  }

  &.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
    background-color: #fff;
  }
}

.tab-content {
  padding: 30px 0;
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.content-item {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

.item-header {
  margin-bottom: 16px;

  .item-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.4;
  }

  .item-meta {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #666;

    .author,
    .date,
    .category {
      position: relative;

      &:not(:last-child)::after {
        content: "|";
        margin-left: 8px;
        color: #ddd;
      }
    }
  }
}

.item-images {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;

  .content-image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eee;
  }
}

.item-content {
  margin-bottom: 16px;

  .description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 12px 0;
  }

  .full-content {
    font-size: 14px;
    line-height: 1.8;
    color: #333;

    :deep(p) {
      margin: 0 0 12px 0;
    }

    :deep(img) {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
  }
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  .tag {
    padding: 4px 12px;
    background: #f0f0f0;
    color: #666;
    font-size: 12px;
    border-radius: 16px;
    transition: all 0.3s ease;

    &:hover {
      background: #1890ff;
      color: #fff;
    }
  }
}

.empty-content {
  text-align: center;
  padding: 60px 20px;
  color: #999;

  p {
    font-size: 16px;
    margin: 0;
  }
}

// 默认内容样式
.default-content {
  padding: 20px 0;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1890ff, lighten(#1890ff, 20%));
  }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;

  .header-content {
    flex: 1;

    .card-title {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 6px;
      line-height: 1.3;
    }

    .card-subtitle {
      font-size: 14px;
      color: #666;
      margin: 0;
      font-weight: 500;
    }
  }

  .view-count {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(#1890ff, 0.1);
    color: #1890ff;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
  }
}

.card-description {
  margin-bottom: 16px;

  p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin: 0;
  }
}

.card-content {
  margin-bottom: 20px;

  .content-html {
    color: #333;
    line-height: 1.7;
    font-size: 14px;

    ul, ol {
      padding-left: 20px;
      margin: 12px 0;
    }

    li {
      margin-bottom: 8px;
      position: relative;

      &::marker {
        color: #1890ff;
      }
    }

    p {
      margin: 8px 0;
    }
  }
}

.parameters-section {
  margin-bottom: 20px;

  .parameters-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;

    svg {
      color: #1890ff;
    }
  }

  .parameters-grid {
    display: grid;
    gap: 12px;
  }

  .parameter-item {
    background: rgba(#1890ff, 0.04);
    border: 1px solid rgba(#1890ff, 0.1);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(#1890ff, 0.08);
      border-color: rgba(#1890ff, 0.2);
    }

    .param-name {
      font-size: 13px;
      font-weight: 600;
      color: #1890ff;
      margin-bottom: 4px;
    }

    .param-value {
      font-size: 14px;
      color: #555;
      line-height: 1.4;
    }
  }
}

.card-footer {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;

  .meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;

    span {
      display: flex;
      align-items: center;
      gap: 4px;

      svg {
        color: #999;
      }
    }
  }

  .tags-section {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    .tag {
      background: rgba(#52c41a, 0.1);
      color: #52c41a;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      border: 1px solid rgba(#52c41a, 0.2);
    }
  }
}

.empty-state {
  text-align: center;
  padding: 80px 20px;

  .empty-icon {
    margin-bottom: 16px;
    color: #ccc;
  }

  h3 {
    font-size: 20px;
    color: #666;
    margin-bottom: 8px;
  }

  p {
    font-size: 14px;
    color: #999;
    margin: 0;
  }
}
</style>
`
